Javascript 使用关键字unhide onclick在textarea中查找、隐藏并用图片替换文本

Javascript 使用关键字unhide onclick在textarea中查找、隐藏并用图片替换文本,javascript,jquery,html,Javascript,Jquery,Html,我正在学习javascript和jQuery,所以我还不知道很多特性,我想听听你的建议 在高层,我想创建一个小脚本,让我可以对文本做几件事,下面是我对伪代码的看法: 用户在提供的文本区域中键入文本。 用户突出显示要更改的单词或在输入字段中输入要更改的单词在这种情况下,我有一个问题,我是否需要多个输入字段,或者我只能使用一个字段创建字符串? 通过按下按钮,文本中的文字将被隐藏并替换为lets say this sign-。。。。 用户点击。。。和隐藏的字。 我非常感谢你能提供的任何帮助 目前,我有

我正在学习javascript和jQuery,所以我还不知道很多特性,我想听听你的建议

在高层,我想创建一个小脚本,让我可以对文本做几件事,下面是我对伪代码的看法:

用户在提供的文本区域中键入文本。 用户突出显示要更改的单词或在输入字段中输入要更改的单词在这种情况下,我有一个问题,我是否需要多个输入字段,或者我只能使用一个字段创建字符串? 通过按下按钮,文本中的文字将被隐藏并替换为lets say this sign-。。。。 用户点击。。。和隐藏的字。 我非常感谢你能提供的任何帮助

目前,我有一个文本区域+根据需要在下拉菜单选择后自动生成的不超过10个输入字段

我找到了这个示例,但我不知道如何将其更改为字符串,所以您可能知道另一种方法?或者也许有一些方法可以让它变得简单

<div class="row-form">
    <label class="label" for="message"></label>
    <textarea class="textarea" id="message" name="message" rows="5" cols="30">apple, banana, orange, apple, banana, orange</textarea>
</div> 

<div id="selected_form_code">
    <label class="label" for="subject"></label> 
    <select id="select_btn">
        <option value="0">--Select No Of Forms to Display--</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>

    </select>
</div>
<div id="form1">
    <form action="#" id="form_submit" method="post" name="form_submit">

    </form>
</div>
还有我的Javascript

// http://www.formget.com/create-multiple-form-fields-based-on-selection-jquery/
$(document).ready(function () {
    $('select#select_btn').change(function () {
        var sel_value = $('option:selected').val();
        if (sel_value == 0) {
            $("#form_submit").empty(); // Resetting Form
            $("#form1").css({
                'display': 'none'
            });
        } else {
            $("#form_submit").empty(); //Resetting Form
            // Below Function Creates Input Fields Dynamically
            create(sel_value);
            // Appending Submit Button To Form
            $("#form_submit").append($("<input/>", {
                type: 'submit',
                value: 'Accept'
            }))
        }
    });
    function create(sel_value) {
        for (var i = 1; i <= sel_value; i++) {
            $("div#form1").slideDown('slow');
            $("div#form1").append($("#form_submit").append($("<div/>", {
                id: 'head'
            }).append(), $("<input/>", {
                type: 'text',
                placeholder: 'Keyword' + i,
                name: 'keyword' + i
            }), $("<br/>")))
        }
    }
});

使用a的解决方案边缘仍然有点粗糙,但是,如果我正确理解了问题,它包含所有必需的功能:

/*抓住*/ var editBox=document.querySelector'div[contenteditable]; /*切换类,该类在每个元素和它的::before伪元素之间交替*/ 函数showHideEllipsis{ 这个.classList.toggle'show-before'; } /*附加可切换的功能。在之前显示*/ 函数attachShowHideEllipsis{ var span=document.querySelector'div[contenteditable]'.children; 对于变量i=0;i