针对输入到表单输入字段中的特定文本并为其添加样式？答案

【问题标题】：Targeting specific text entered into form input field and add styles to it?针对输入到表单输入字段中的特定文本并为其添加样式？
【发布时间】：2017-03-13 05:09:55
【问题描述】：

如何设置表单输入文本字段中输入的第二个单词的样式？不是在他们输入文本的字段本身，而是在输入文本的人点击“输入”按钮并输出数据时。

在此字段中始终输入相同的文本排列。它是 3 个数字，然后是一个空格，然后是一个名称。

示例：
如果我在表单输入字段中输入“903 Houston”并运行它，我怎样才能使第二个单词的样式输入“Houston”（让我们说它加粗）并使其输出“903 Houston " 假设我需要以某种方式将 HTML 标签注入到输入的第二个单词中？这如何实现？

【问题讨论】：

一个“表单输入文本字段”不能在不同的词上有不同的样式
返回时结果本身的第二个单词呢？文本由站点管理员输入，并在页面上的站点前面输出。必须有一种方法可以定位和设置样式。

标签： javascript jquery html css forms

【解决方案1】：

给定一串单词，我认为设置单个单词样式的最简单方法是将.split() 输入字符串转换为单个单词数组，然后根据它们在数组中的位置更新您想要的任何一个，之前.join()ing 重新组合成一个 HTML 字符串。通过这种方式，很容易将单个单词包装在具有特定类的 span 元素中，然后根据您的喜好设置该类的样式。

“文本由站点管理员输入，并在页面上的站点前面输出。必须有一种方法可以定位和设置样式。” em>

是的。使用 jQuery 选择有问题的元素，然后将上述技术应用于它。也许有点像这样：

$(".styleMe").html(function(i, currentText) {
    var words = currentText.split(" ");
    words[1] = "<span class='bold'>" + words[1] + "</span>";
    words[3] = "<span class='highlight'>" + words[3] + "</span>";
    return words.join(" ");
});

.bold { font-weight: bold; }
.highlight { background-color: blue; color: white; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Some text.</p>
<p class="styleMe">These are some words to be styled.</p>
<p>Some other text.</p>

注意：如果输入格式的长度可能会有所不同，那么显然您应该对其进行测试，例如，您不会尝试更新其中只有一个单词的字符串中的第二个单词。

【讨论】：