通过按钮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元素的不显眼的方式。

此外，您可以在迭代突出显示的代码的数组中定义要突出显示的单词，如下面的小提琴。该highlight功能click事件的

(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"，并且绑定。

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

正如script47说传递一个数组，或者如果你想要写不好的代码有你的函数接受多个参数。

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

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