在单击按钮上从textarea剥离html并存储剥离的文本 [英] strip html from textarea on button click and store the stripped text

问题描述

• 我尝试将textarea的值加载到按钮上的变量中 点击，
• 然后剥离所有HTML标记，除了html标记br和strong
• 然后将新值保存到另一个变量中.

• I try to load the value of a textarea into a variable on button click,
• then stripe all html tags except of the html tags br and strong
• then save the new value into another variable.

我找到了这个解决方案，该解决方案适用于普通div，但似乎不适用于textareas.因此，我创建了一个临时div并将其html设置为textarea的值.

I found this solution which works on a normal div, but does not seem to work with textareas. So I created a temporary div and set it's html to the value of the textarea.

//Create a temporary div and initialize it with the value from the first param
var tmp         = document.createElement("DIV");
tmp.id          = "tmp";
tmp.innerHTML   = html;

这是我的尝试，不起作用.我认为是因为我动态创建了div，而jQuery却不知道它的存在?

This is my attempt which is not working. I think because i create the div dynamically and jQuery is not aware of it's existence?

//init the textarea value for this example
$("textarea#message").val
(
  "<div>\n"+
  "<strong>Hello Universe</strong>\n"+
  "<br><p>Spread good Vibes :)</p>\n"+
  "</div>"
);

$("div#mybutton").on
(
	"click",
  function()
  {
    var textarea   = document.getElementById("message");
    var allText    = textarea.value;
    var newText    = strip_tags(allText, "strong, br");
  
    //now do something with the new text
    textarea.value = newText;
    console.log(newText);
  }
);

function strip_tags(html, exceptions)
{  
    console.log(html);
    //Create a temporary div and initialize it with the value from the first param
    var tmp         = document.createElement("DIV");
    tmp.id          = "tmp";
    tmp.innerHTML   = html;
    

    document.body.appendChild(tmp);
       
    //Strip tags and return the whole stripped text
    $("#tmp *").not(exceptions).each(function(){

        var content = $(this).contents();
        $(this).replaceWith(content);
    });
}

div#mybutton {
  border: 1px solid black;
  width: 80px;
  text-align: center;
}

div#mybutton:hover {
  cursor: pointer;
  color: white;
  background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <textarea id='message' autofocus maxlength="500" rows="4" cols="50"></textarea>
  <div id="mybutton"> PRESS </div>
</div>

推荐答案

我找到了解决方案，有两个问题.

I found the solution, there were two problems.

1..我必须将创建的DIV附加到DOM.

1. I had to append the created DIV to the DOM.

2..我已经在第一个周期之前回来了.

2. I returned already before the first cycle.

现在它可以工作了，基本上我只是从PHP函数 karim79 贡献.

Now it works, and basically I just developed the equivallent from the PHP function strip_tags ;) Credits to karim79 for his contribution.

//init the textarea value for this example
$("textarea#message").val
(
  "<div>\n"+
  "<strong>Hello Universe</strong>\n"+
  "<br><p>Spread good Vibes :)</p>\n"+
  "</div>"
);

$("div#mybutton").on
(
  "click",
  function()
  {
    var textarea   = document.getElementById("message");
    var allText    = textarea.value;
    var newText    = strip_tags(allText, "br");
  
    //now do something with the new text
    textarea.value = newText;
  }
);

//strips all html tags from a string except the tags from the whitelist, and returns the new string. (this function works exactly as the PHP equivalent strip_tags  http://php.net/manual/de/function.strip-tags.php) 
function strip_tags(str, whitelist)
{  
    console.log("TEXT BEFORE STRIPE: (whitelist: "+whitelist+")\n\n"+ str);
    //Create a temporary div and initialize it with the value from the first param
    var tmp         = document.createElement("DIV");
    tmp.id          = "tmp";
    tmp.innerHTML   = str;
    
    document.body.appendChild(tmp);
    
    //Strip tags and return the whole stripped text
    $("#tmp *").not(whitelist).each(function(){
        if ($(this).is("br"))
        {
            $(this).remove();
        }
        var content = $(this).contents();
        $(this).replaceWith(content);
    });
    
    var newText = tmp.innerHTML;
    tmp.remove();
    
    console.log("----------------------------------------------------------");
    console.log("TEXT AFTER STRIPE: (whitelist: "+whitelist+")\n"+ newText);
    return newText;
}

div#mybutton {
  border: 1px solid black;
  width: 80px;
  text-align: center;
}

div#mybutton:hover {
  cursor: pointer;
  color: white;
  background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <textarea  id='message' autofocus maxlength="500" rows="4" cols="50"></textarea>
  <div id="mybutton"> PRESS </div>
</div>

这篇关于在单击按钮上从textarea剥离html并存储剥离的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！