任何已知單詞的點擊事件

Question

我有一段文字，例如

“這是一段糟糕的段落。好的是，這很糟糕。您知道它的不利之處嗎？非常糟糕，為什么您不知道這一點。”

單擊任何“不良”字詞后如何觸發事件。 而不用<span class="good-class">bad</span>或其他任何字詞代替“壞”字？

Answer 1

僅選擇器是不可能實現的。 由於選擇器會選擇整個元素。 但是，您可以在這里做些小技巧：

 var $el = $(".my-text"), html = $el.html(); // Replace with spans html = html.replace(/\\b(bad)\\b/ig,"<span class='bad-text'>$1</span>"); // Update content $el.html(html); // Assign click handler to those new elements $(".bad-text").on("click", function(e) { alert(this.textContent); }); 

 .bad-text{color:red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="my-text"> Bad! This is a bad paragraph. The good things is, this is bad. Very bad, why you do not know this. Simbad is a badass </p> 

首先用一些選擇器替換“壞”一詞，然后綁定該選擇器。

Answer 2

我最初的想法是，您可以獲取元素的innerHTML，然后在標有“ bad”的文本周圍放置跨度，並向其添加eventListener。 當然，如果您可以訪問html，則可以先在它們周圍放跨度。

通過Id或TagName或其他方式選擇DOM中的段落-如果沒有原始html，很難告訴您哪個段落。

然后將“ bad”一詞替換為“ bad”，然后訪問所有這些跨度並向其添加事件偵聽器。 在事件偵聽器內部，仔細檢查跨度內容是否為“錯誤”，然后執行所需的任何代碼。

var el = document.getElementById("this-text");
var text = el.innerHTML;
var newText = text.replace(/\bbad\b/g, "<span>bad</span>");
el.innerHTML = newText;
var spans = el.getElementsByTagName('span')
for (let i=0; i<spans.length; i++) {
  spans[i].addEventListener('click', function() {
    if(this.innerHTML === 'bad') {
      alert('You clicked bad') // put whatever you want here
    }
}, false);
}

另外這里還有一個小提琴https://jsfiddle.net/BrettEast/attg0zqz/