使用按钮 onclick 传递多个值

Question

有类似的帖子，但我找不到适合我独特案例的解决方案。

我有一个脚本，当用户单击突出显示按钮时，它会突出显示关键字。目前它只突出显示“狐狸”这个词，但我需要它突出显示其他词，在这种情况下是“栅栏”和“跳跃”。

这里是 HTML：

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

我尝试将'fox' 更改为'+fox+','+fence+','+jumped+'，但没有成功。

javascript是：

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 
    }

}

和 CSS：

.highlight
{
background-color:yellow;}

Answer 1

<button onclick="highlight('fox')+highlight('jumped')+highlight('fence')">Highlight</button>

Answer 2

您不应在标记中使用onclick，而应尝试利用最佳实践并仅通过 javascript 绑定事件，因为这是将处理程序附加到 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 函数与点击事件的绑定。

Answer 3

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

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 4

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

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;
    }
}