javascript - 识别以问号结尾的单词并在打字时在其周围放置跨度标签

Question

<小时/>

目标:识别以问号结尾的单词，并在键入时在其周围放置 span 标签

<小时/>

INFO: I have a container where the text inside is editable. Now while the user is writing something, I want the program to parse the text and place any word ending with a question mark inside a span tag. How can I achieve this?

提前谢谢

HTML

<div id='wrapper' contenteditable='true'></div>

Javascript

let wrapper = document.getElementById('wrapper');
let rgx = /([a-zA-Z]+)(\?)/g;

function update() {
    let hits, result;

  hits = wrapper.innerHTML.match(rgx);
    result = wrapper.innerHTML;

  for (let hit of hits) {
    result = result.replace(hit, '<span>' + hit + '</span>');
  }

  wrapper.innerHTML = result;
}

wrapper.addEventListener('input', function(e) {
    update();

  e.preventDefault();
})

风格

span {
  font-weight: bold;
  color: #8e44ad;
}

Answer 1

试试这个正则表达式 /\b(\w+)\b\?/g

并替换为 "<span>\1</span>"

或者"<span>" + hit[1] + "</span>"

See on regex101