Question

我的目标是拥有一个用JavaScript制作的荧光笔，该笔可以多次更改某个单词的颜色。

<div id="code" contenteditable="true">
 hello world hello world
</div>

我想要一个输出，例如：“ 你好世界你好世界”

如何使用JavaScript更改两个“ hello”的颜色？

Answer 1

通过以下代码，您可以编写一个函数来查找单词并将其替换为彩色元素（例如或＆...）

$(function(){

  // inquire element for run the function
  var elem = $('#code');
  
  // call highlighter method with the word and elemnet
  highlighter('hello', elem);  
  
});

function highlighter(word, elem){
  // get inner html from passed element
  var html = elem.html();

  // define a new regex for replacing the word on specified element
  var reg = new RegExp(word,"g");
    
  // replace all found words with a new wrapped word
  html = html.replace(reg, "<span class='highlight'>" + word +"</span>");
  
  // set the specified element with new html
  elem.html(html);
}

.highlight {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="code" contenteditable="true">
 hello world hello world
</div>

Answer 2

您必须拆分文本以获取每个单词，然后将每个单词添加到不同的“ span”标签中，如果单词为“ hello”，则将“ fontWeight”属性设置为“ bold”。

这是一个例子：

var div = document.getElementById("code");
var text = div.innerText;
div.innerText = '';
text.split(' ').forEach(x => {
  const span = document.createElement('span');
  span.innerText = x + ' ';
  if(x == 'hello')
    span.style.fontWeight = 'bold';
  div.appendChild(span);
})

尝试this fiddle

可编辑代码中的JavaScript荧光笔

2 个答案: