简体   繁体   English

用文本替换textarea内的html标签

[英]replacing html tag inside textarea with text

code : 代码:

 <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var $this = $("#Test_txtarea");
        var txtval = $this.val();
        $this.find("img").each(function () {
            var imgbytes = $(this).attr("name"); // extract bytes from selected img src 
            $(this).replaceWith(imgbytes);
        });
        $("#NewVal").html(txtval);
     });
</script>

html html

<textarea ID="Test_txtarea" >Hi <img src='test.png' name='test' > kifak <img src='test2.png' name='test1' > Mnih <img src='test3.png' name='test3' ></textarea>
 <span id="NewVal" ></span>

what i am trying to do is basically trying to replace each img tag by it's name so the final textarea value will be like this : Hi test kifak test1 Mnih test3 我想要做的基本上是尝试使用其名称替换每个img标签,因此最终的textarea值将如下所示:Hi test kifak test1 Mnih test3

this is the jsfiddle : http://jsfiddle.net/Ga7bJ/2/ 这是jsfiddle: http : //jsfiddle.net/Ga7bJ/2/

the .find("img") always return 0 as length.how can i fix this code ? .find("img")始终返回0作为长度。如何修复此代码?

Though it is not complete answer or at least not going to be "Copy paste" answer, there is few things you need to do here: 尽管它不是完整答案,或者至少不会是“复制粘贴”答案,但是您在这里需要做的事情很少:

  1. The content of Textarea is VAL of it and not InnerHTML. Textarea的内容是VAL而不是InnerHTML。 So, you have to pick that content as value and than create a hidden div and put it as HTML. 因此,您必须选择该内容作为值,然后创建一个隐藏的div并将其作为HTML放置。 Once you did it, you can now find the HTML tags in it using find rather easily. 完成后,您现在可以使用find轻松地在其中找到HTML标记。

  2. Once you find tag you can find the name using attr() function 找到标签后,您可以使用attr()函数查找名称

  3. Once you have name, than you again go back to val() of textarea, and do regex replace or using HTML you can replace as well I guess, but not sure. 一旦有了名字,就可以再次返回到textarea的val(),并进行正则表达式替换或使用HTML,您也可以替换,但不确定。

The following code works for me. 以下代码对我有用。 Basically, I get the value of the text area and append it to an off-screen div. 基本上,我得到了文本区域的值,并将其附加到屏幕外的div上。 Now that I have valid markup nesting, I can iterate the child-nodes as normal. 现在我有了有效的标记嵌套,可以正常迭代子节点了。

function byId(e){return document.getElementById(e)}
function newEl(t){return document.createElement(t)}
function test()
{
    var div = newEl('div');
    div.innerHTML = byId('Test_txtarea').value;
    var msg = '';
    var i, n = div.childNodes.length;
    for (i=0; i<n; i++)
    {
        if (div.childNodes[i].nodeName == "IMG")
            msg += div.childNodes[i].name;
        else if (div.childNodes[i].nodeName == "#text")
            msg += div.childNodes[i].data;
    }
    byId('NewVal').innerHTML = msg;
}

Look at this jsFiddle . 看看这个jsFiddle What is does is: 什么是:

It gets the value from your Test_txtarea and sets that as the html of a hidden div. 它从Test_txtarea获取值,并将其设置为隐藏div的html。
The hidden div wil render the images within the textarea. 隐藏的div将在文本区域内渲染图像。
After they have been rendered, I find these images, 渲染后,我找到了这些图像,
- get the source, -获取来源
- remove all characters after the . -删除.之后的所有字符.
- replace the entire html of the image with the src. -将图片的整个html替换为src。
After all that has been done you are left with a div with the value you wanted. 完成所有这些操作后,您将获得一个具有所需值的div。
All what is done next is the html from the div is copied to the value of your textarea. 接下来要做的就是将div中的html复制到textarea的值。

 function replaceImageWithSrc(value){
        var div = $("#invisible");
        div.html(value);
        var images = div.find("img");
        images.each(function(index){
           var src = $(this).attr("src").split(".")[0];
           this.outerHTML = src;
        });
    return div.html();

}    
$(document).ready(function () {
        var txtArea = $("#Test_txtarea");
        var txtval = txtArea.val();
        txtval = replaceImageWithSrc(txtval);
        txtArea.val(txtval);
    });

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM