将输入到表单输入字段的特定文本定位并向其添加样式？ [英] Targeting specific text entered into form input field and add styles to it?

问题描述

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

文本总是进入该字段。例如：

如果我在表单输入字段中输入903 Houston，然后运行它如何使第二个单词的风格进入休斯顿（可以说让它变成粗体）并输出903 Houston 假设我需要将HTML标签以某种方式注入第二个单词进入？这是怎么实现的？

解决方案

给出一串字，我认为最简单的方式来设置单个单词是 .split（）将输入字符串转换为一个单独的单词数组，然后基于它们在数组中的位置更新您想要的任何一个或多个字符串，在 .join（）返回到一个HTML字符串。以这种方式，很容易将单个单词放在具有特定类的span元素中，然后根据您的喜好设置该类的样式。

文本由网站管理员输入，并在页面上输出到网站的前端，必须有一种方法可以定位和设置。

是的。用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;白颜色; }

 < script src =https：// ajax .googleapis.com / ajax / libs / jquery / 1.11.1 / jquery.min.js>< / script>< p>一些文字。< / p>< p class =styleMe> < / p>< p>其他一些文字。< / p>  

注意：如果输入格式的长度可能有所不同，那么显然你应该测试一下，例如，你不想更新第二个字一个只包含一个单词的字符串。

How can I style the 2nd word entered into a form input text field? Not in the field itself where they are entering the text, but once the person entering the text hits the "enter" button and the data gets output.

The same arrangement of text always gets entered into this field. It's 3 numbers, then a space, then a name.

Example:
If I input "903 Houston" into the form input field and run it how can I make the style of the second word entered "Houston" (lets say make it bold) and make it output "903 Houston" Assuming I need to inject HTML tags somehow to just the second word entered? How can this be accomplished?

解决方案

Given a string of words, I think the easiest way to style individual words is to .split() the input string into an array of individual words and then update whichever one(s) you wanted to based on their position in the array, before .join()ing back together into a string of HTML. In that way it is easy enough to wrap an individual word in a span element with a specific class, and then style that class however you like.

"The text is entered by a site administrator and gets output to the front of the site on a page. There must be a way this can be targeted and styled."

Yes. Select the element in question with jQuery and then apply the above technique to it. Perhaps a little something like this:

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

Note: if there is a possibility the input format may vary in length then obviously you should test that, so that, e.g., you're not trying to update the second word in a string that only has one word in it.

这篇关于将输入到表单输入字段的特定文本定位并向其添加样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！