Question

如何设置输入表单输入文本字段的第二个单词的样式？不是在他们输入文本的字段本身，但是一旦输入文本的人点击＆＃34;输入＆＃34;按钮和数据输出。

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

例：
如果我输入＆＃34; 903 Houston＆＃34;进入表单输入字段并运行它如何使第二个单词的样式输入＆＃34;休斯顿＆＃34; （让我们说它是大胆的）并使其输出＆＃34; 903 休斯顿＆＃34;假设我需要以某种方式将HTML标签注入输入的第二个单词？如何实现这一目标？

Answer 1

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

＆＃34;文本由网站管理员输入，并在页面上输出到网站的正面。必须有一种方法可以定位和设置样式。＆＃34;

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

＆＃13;

$(".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(" ");
});

＆＃13;

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

＆＃13;

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

＆＃13;

注意：如果输入格式有可能在长度上有所不同，那么显然你应该测试一下，这样，例如，你不会尝试更新只有一个单词的字符串中的第二个单词它

将特定文本定位到表单输入字段并为其添加样式？

1 个答案: