Question

我正在寻找一种方法来突出显示文本框中的单词（或其他一些标记或使单词明显的方式），如果它们在列表中（可能是带有Javascript的数组列表）。

我不希望这是实时的，检查文本框中的单词的按钮将完美地工作。基本上是“如果Word是（Word1，Word2等），那么在此处插入更改到Word。”

我也很好，只是将全部大写字母表示改变。无论多么容易。我是Javascript的新手，只了解如何执行此操作的基本概念，并希望了解如何使其与文本框进行交互。

Answer 1

您可以将其设为<b>Word</b>或根据<em>Word</em>的某种风格强调。有关em标签的详细信息，请参阅此https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em。

Answer 2

这是一个快速的javascript示例，用于处理gabesoft回答的注释中引用的contenteditable属性。您可以定义单词列表，指定文本框，然后使用按钮来执行突出显示。

JSFiddle Example

HTML：

<p contenteditable="true">This is a test of the word highlight system.</p>
<button onClick="highlightWords()">highlight</button>

JS：

//define words you want highlighted
var arr = ['test', 'system'];

//locate the element on the page to do the word operations
//this will find the first <p> tag
var textbox = document.getElementsByTagName('p')[0];

var highlightWords = function() {
  //foreach word, perform highlighting actions
  arr.forEach(function(word) {

    //build regular expression to match against each variable (word) in our list
    var regex = new RegExp("(" + word + ")", "gi");
    //g = can find multiple instances (global)
    //i = case insenstive

    //replace predefined textbox HTML with 'highlighted' version
    //the regex will find matching words and wrap them in <strong> tags
    //the $1 represents the matched word
    textbox.innerHTML = textbox.innerHTML.replace(regex, "<strong>$1</strong>");
  });
}

使用Javascript从列表中键入时突出显示单词

2 个答案: