使用jQuery在所选文本之前和之后插入文本 [英] Insert text before and after the selected text with jQuery
问题描述
我想在HTML文档中任何选定的文本之前和之后放置一些指定的文本(如果可能).
I want to put some specified text (where possible) before and after any selected text in an HTML document.
我认为应该有一种使用jQuery的聪明方法.无论如何,是否可以使用jQuery在文档中的任意位置的选定文本之前和之后插入特定文本?
I think there should be a smart way to do that with jQuery. Is there anyway to insert specific text before and after selected text anywhere in the document using jQuery?
推荐答案
好的,这是一种方法(尽管我怀疑还有更简洁,有效且坦率地说更好的方法)它):
Well, here's one way to do it (though I suspect there are more concise, efficient and, honestly, better ways of doing it):
var needle = 'ipsum';
var wrappingText = ' wrapper ';
$('p').each(
function(){
var haystack = $(this).text();
$(this).text(haystack.replace(needle, wrappingText + needle + wrappingText));
});
很明显,这依赖于包含在p
元素中的文本,但是很容易将其修改为任何其他特定元素或元素类.
This, obviously, relies upon the text being contained within a p
element, but that's easily amended to any other particular element, or class of element.
这是用HTML包装needle
的一种方法(尽管,这可能不是最漂亮的方法):
And here's a way of wrapping the needle
with html (though, again, it's probably not the prettiest way):
<form action="" method="post">
<fieldset>
<label for="needle">Search for this text: </label>
<input type="text" name="needle" id="needle" placeholder="Example: 'sit'" />
</fieldset>
<fieldset>
<label for="wrapper">Wrap with this:</label>
<input id="wrapper" name="wrapper" type="text" placeholder="Example: <em>" />
</fieldset>
<fieldset id="choose">
<input type="radio" name="wrapWith" id="text" value="0" checked /><label for="html">Text</label>
<input type="radio" name="wrapWith" id="html" value="1" /><label for="html">HTML</label>
</fieldset>
<fieldset>
<input type="submit" value="search" />
</fieldset>
</form>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
jQuery:
$('form').submit(
function(){
var needle, wrapper, haystack;
if ($('#needle').val().length >= 1) {
needle = $('#needle').val();
}
else {
needle = 'ipsum';
}
if ($('#wrapper').val().length >= 1) {
wrapper = $('#wrapper').val();
}
else {
wrapper = 'wrap';
}
var wrappingText = 'wrapper';
$('p').each(
function(){
if ($('#text').is(':checked')) {
haystack = $(this).text();
$(this).text(haystack.replace(needle, wrapper + needle + wrapper));
}
else if ($('#html').is(':checked')) {
haystack = $(this).text();
$(this).html(haystack.replace(needle, wrapper + needle + wrapper.replace('<', '</')));
}
});
return false;
});
这篇关于使用jQuery在所选文本之前和之后插入文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!