Вставьте текст до и после выделенного текста с помощью jQuery

Question

Я хочу поместить определенный текст (где это возможно) до и после любого выделенного текста в документе HTML.

Я думаю, что должен быть разумный способ сделать это с помощью jQuery.Есть ли способ вставить определенный текст до и после выделенного текста в любом месте документа с помощью jQuery?

Answer 1

Ну, вот один из способов сделать это (хотя я подозреваю, что есть более краткие, эффективные и, честно говоря, лучше способы сделать это):

var needle = 'ipsum';
var wrappingText = ' wrapper ';

$('p').each(
    function(){
        var haystack = $(this).text();
        $(this).text(haystack.replace(needle, wrappingText + needle + wrappingText));
    });

Это, очевидно,, опирается на текст, содержащийся в элементе p, но его легко изменить для любого другого конкретного элемента или класса элемента.

JS Fiddle demo

И вот способ обернуть needle html (хотя, опять же, это, вероятно, не самый красивый способ):

html:

<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;
    });

JS Fiddle demo .

Answer 2

Может быть этот плагин будет полезен? Здесь - пример того, как его использовать.