Question

有类似的帖子，但我无法为我的独特案例找到解决方案。

我有一个脚本，当用户点击突出显示按钮时突出显示关键字。目前它只是突出显示＆＃34; fox＆＃34;这个词，但我需要它来突出显示其他词，在这种情况下＆＃34; fence＆＃34;和＃34;跳了＃34;。

这是HTML：

public static void Initialize(Socket mainSocket)
{           
    while(true)
    {
        var userSocket = await Task.Factory.FromAsync(
                                mainSocket.BeginAccept,
                                mainSocket.EndAccept);
        ThreadPool.QueueUserWorkItem(_ => AddConnection(userSocket));
    }
 }

 private static void AddConnection(Socket userSocket)
 {
     // Removed the stuff that happens to UserSocket because the same
     // symptoms occur regardless of their presence.
 }

我尝试将<div id="inputText"> The fox quickly jumped over the fence. </div> <button onclick="highlight('fox')">Highlight</button>更改为'fox'，但没有运气。

javascript是：

'+fox+','+fence+','+jumped+'

和CSS：

function highlight(text)
{
    inputText = document.getElementById("inputText")
    var innerHTML = inputText.innerHTML
    var index = innerHTML.indexOf(text);
    if ( index >= 0 )
    { 
        innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
        inputText.innerHTML = innerHTML 
    }

}

Answer 1

您应该尝试利用最佳实践并通过javascript绑定事件，而不是在标记中使用onclick，因为这是将处理程序附加到DOM元素的最不显眼的方式。

此外，您可以在数组中定义要突出显示突出显示代码的单词，如下面的小提示。

(function() {

  function highlight() {
    var wordsToHighlight = ["fox", "fence", "jumped"];

    wordsToHighlight.forEach(function(text) {
      inputText = document.getElementById("inputText")
      var innerHTML = inputText.innerHTML
      var index = innerHTML.indexOf(text);
      if (index >= 0) {
        innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
        inputText.innerHTML = innerHTML
      }
    });
  }

  button = document.getElementById('btn-highlight');
  button.onclick = highlight;
})();

.highlight {
  background-color: yellow;
}

<div id="inputText">The fox quickly jumped over the fence.</div>
<br/>
<button id="btn-highlight">Highlight</button>

注意标记中的id="btn-highlight"以及highlight函数与click事件的绑定。

Answer 2

我们可以传递一个分隔的字符串，然后将其拆分成一个数组。你可以使用你想要的任何分隔符，但我选择了一个逗号。然后，您可以遍历此数组以突出显示单词。

jsfiddle

<div id="inputText">
The fox quickly jumped over the fence.
</div>
<button onclick="highlight('fox,fence,jumped')">Highlight</button>

<script>

function highlight(text){

    var i, index, words = text.split(",");
    var inputText = document.getElementById("inputText");
    var innerHTML = inputText.innerHTML;

    for(i=0;i<words.length;i++){

      index = innerHTML.indexOf(words[i]);
      if (index >= 0) {
      innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+words[i].length) + "</span>" + innerHTML.substring(index + words[i].length);
    inputText.innerHTML = innerHTML;
      }

    }
}    

</script>

Answer 3

function highlight(text1, text2, text3...)

Answer 4

正如script47所说，传递数组或者如果你想编写错误的代码，你的函数会接受多个参数。

{{1}}

Answer 5

更好的方法是使用像对象这样的预制字典：

DEMO和来源：JSnippet DEMO

JS：

var dic = {
   fox:['fox','jumped','fence'],
   cat:['cat','happy']
};
function parse(target) {
    var inputText = document.getElementById("inputText");
    inputText.innerHTML = inputText.innerHTML.replace(/(<([^>]+)>)/ig,"");
    if (typeof dic[target] === 'object')
        for (var i=0; i<dic[target].length; i++)
           tokenize(dic[target][i]);
}
function tokenize(text) {
    var inputText = document.getElementById("inputText"); 
    var inner = inputText.innerHTML;
    var index = inner.indexOf(text);
    if ( index >= 0 ) { 
        inner = inner.substring(0,index) + 
                "<span class='highlight'>" + inner.substring(index, index + text.length) + "</span>" + 
                inner.substring(index + text.length);
        inputText.innerHTML = inner;
    }
}

使用按钮onclick传递多个值

5 个答案: