Question

我尝试使用textarea在keyup上调用函数来构建一个简单的颜色荧光笔，并使用div来输出结果（突出显示/彩色文本）。

要突出显示的单词及其相关颜色存储在此对象中：

var obj = {
  "to": "green",
  "code": "red",
  "applet": "blue"
}

然后将输入字符串拆分为单词单元，以检查它们是否与obj键匹配。

var splitRequest = input.value.toLowerCase().split(' ');

如果他们这样做，那么他们应该突出显示。我写了一个简单的代码来完成这个技巧（最后看到小提琴），除了这一行：

output.innerHTML += '<span style="color:' + obj[splitRequest[i]] + '">' + splitRequest[i] + " </span>";

由于+=符号，它会在每个按键上打印整个文本，而不是用新的内容替换当前内容。问题是我不能简单地使用=符号，因为它只会打印splitRequest数组的第一个元素而不是整个数组。我尝试使用join()方法，但它显然没有按预期工作（test）。

也许代码本身并不是那么好，我应该使用另一种方法来实现它。这将是一个更好地学习javascript的好方法，但我实际上不知道如何做到这一点。

如何在突出显示匹配的单词时输出文本用户类型而不会出现此问题？

以下是我遇到的工作演示：https://jsfiddle.net/Lau1989/9oL7umtt/1/

感谢您的帮助

PS：我知道有第三方可用于语法高亮，但为了教育自己，我尝试使用纯javascript（没有jQuery）从头开始编码。

Answer 1

添加

output.innerHTML = "";

之后

var output = document.getElementById('output');

在第9行

https://jsfiddle.net/Lauy79kv/

Answer 2

这是一个可行的解决方案

var obj = {
    "to": "green",
    "code": "red",
    "applet": "blue"
}

function highlight() {
    var input = document.getElementById('input');
    var output = document.getElementById('output'),
        pattern = /\s+(to|code|applet)(?=\s+)/gi;

    output.innerHTML = input.value.replace(pattern, function (x) {
       return "<span style=\"color:" + obj[x.toLowerCase().trim()] +
           "\"> " + x + "</span>" });
}

Answer 3

你可以用它。 var obj = { “to”：“green”， “红色代码”， “小程序”：“蓝色” }

    props = [];
    for (var p in obj) {
        props.push(p);
    }
    var pat = new RegExp("\\s+(" + props.join("|") + ")(?=\\s+)", "gi");
    alert(pat);
    function highlight() {
        var input = document.getElementById('input');
        var output = document.getElementById('output');
        output.innerHTML = input.value.replace(pat, function (x) { return "<span style=\"color:" + obj[x.toLowerCase().trim()] + "\"> " + x + "</span>" });

    }

Answer 4

以下是ES2015 / ES6样式的示例，使用map / reduce和字符串模板。

'use strict'

const obj = {
  "to": "green",
  "code": "red",
  "applet": "blue"
}

const output = document.getElementById('output')
document.getElementById('input')
  .addEventListener('keyup', highlight)

/**
 * Process text and provides provides that text in output control
 */
function highlight() {
  output.innerHTML = processText(input.value.toLowerCase())
}

/**
 * Process text and returns formatted HTML text to be displayed
 *
 * @param {string} text - text to be processed
 * @return {string} - formatted HTML text
 */
function processText(text) {
  return text.split(' ')
    .map(x => obj[x] ? `<span style="color: ${obj[x]}">${x}</span>` : x)
    .reduce((prev, cur) => `${prev} ${cur}`)
}

/**
 * Trigger first time hightlight function
 * so it will highlight text if there is any text in input contol
 */
highlight()

textarea {
  padding: 10px;
}
div {
  width: 235px;
  height: 80px;
  border: 1px solid black;
  padding: 10px;
  overflow: auto;
  color: black;
}

<textarea cols="30" rows="5" id="input" autofocus>To code or not to code this Applet</textarea>

<div id="output"></div>

文本突出显示（从头开始）输出问题

4 个答案: