javascript - 如何用关键字替换文本？

Question

你好，我正在创建一个聊天应用程序，我试图让文本区域接受 svg 文件，但它只接受代码，所以我让它把代码带到文本区域。问题是 svg 文件的文本(使它们成为 php)很大。我怎样才能用一个词覆盖/替换它们到文本区域？而且这个我只能使用一次，我想添加表情符号时每次都按F5而不用多次使用怎么办？这是聊天的代码，谢谢!

    <textarea id="comment" style="width: 280px; margin-top: 10px; box- 
     shadow: inset 0 -15px 35px -5px rgba(0,0,0,0.3); height: 40px; 
    overflow: auto;">
    </textarea>

          <center><p class="emoticonsTitle">Emojis</p></center>
            <div class="emojis">
              <ul>
                  <li><a style="cursor: pointer;" onclick="test()"><img 
                src="emoticons/cloudda3.svg" 
               style="width:28px;height:28px;"/></a></li>
                  <li><a style="cursor: pointer;" onclick="test2()"><img 
  src="emoticons/cloudnigh3.svg" style="width:28px;height:28px;"/></a></li>
                  <li><a style="cursor: pointer;" onclick="test3()"><img 
  src="emoticons/cloudy.svg" style="width:28px;height:28px;"/></a></li>
                  <li><a style="cursor: pointer;" onclick="test4()"><img 
  src="emoticons/cloudy-day-1.svg" style="width:28px;height:28px;"/></a> 
  </li>
                  <li><a style="cursor: pointer;" onclick="test5()"><img 
  src="emoticons/cloudy-day-2.svg" style="width:28px;height:28px;" /></a> 
  </li>
                  <li><a style="cursor: pointer;" onclick="test6()"><img 
                  src="emoticons/cloudy-night-1.svg" 
                  style="width:28px;height:28px;" /></a></li>
                  <li><a style="cursor: pointer;" onclick="test7()"><img 
                  src="emoticons/cloudy-night-2.svg" 
                  style="width:28px;height:28px;" /></a></li>
                  <li><a style="cursor: pointer;" onclick="test8()"><img 
                  src="emoticons/night.svg" style="width:28px;height:28px;" 
                   /></a></li>
                  <li><a style="cursor: pointer;" onclick="test9()"><img 
                  src="emoticons/rainy-1.svg" 
                  style="width:28px;height:28px;" /></a></li>
                  <li><a style="cursor: pointer;" onclick="test10()"><img 
                  src="emoticons/rainy-2.svg" 
                   style="width:28px;height:28px;" /></a></li>
                  <li><a style="cursor: pointer;" onclick="test11()"><img 
                  src="emoticons/rainy-3.svg" 
                  style="width:28px;height:28px;" /></a></li>
                  <li><a style="cursor: pointer;" onclick="test12()"><img 
                  src="emoticons/rainy-4.svg" 
                  style="width:28px;height:28px;" /></a></li>
                  <li><a style="cursor: pointer;" onclick="test13()"><img 
                  src="emoticons/rainy-5.svg" 
                  style="width:28px;height:28px;" /></a></li>
                  <li><a style="cursor: pointer;" onclick="test14()"><img 
                   src="emoticons/rainy-6.svg" 
                  style="width:28px;height:28px;" /></a></li>
                  <li><a style="cursor: pointer;" onclick="test15()"><img 
                   src="emoticons/rainy-7.svg" 
                  style="width:28px;height:28px;" /></a></li>
                  </ul>



          <script type="text/javascript">
          function test(){
              $.ajax({url:"cloudda3.php",success:function(result){
              $("#comment").text(result);
            }})
           }

          function test2(){
              $.ajax({url:"cloudnigh3.php",success:function(result){
              $("#comment").text(result);
            }})
           }

          function test3(){
              $.ajax({url:"cloudy.php",success:function(result){
              $("#comment").text(result);
            }})
           }

          function test4(){
              $.ajax({url:"cloudy-day-1.php",success:function(result){
              $("#comment").text(result);
            }})
           }

          function test5(){
              $.ajax({url:"cloudy-day-2.php",success:function(result){
              $("#comment").text(result);
            }})
           }

          function test6(){
              $.ajax({url:"cloudy-night-1.php",success:function(result){
              $("#comment").text(result);
            }})
           }

          function test7(){
              $.ajax({url:"cloudy-night-2.php",success:function(result){
              $("#comment").text(result);
            }})
           }

          function test8(){
              $.ajax({url:"night.php",success:function(result){
              $("#comment").text(result);
            }})
           }

          function test9(){
              $.ajax({url:"rainy-1.php",success:function(result){
              $("#comment").text(result);
            }})
           }

          function test10(){
              $.ajax({url:"rainy-2.php",success:function(result){
              $("#comment").text(result);
            }})
           }

          function test11(){
              $.ajax({url:"rainy-3.php",success:function(result){
              $("#comment").text(result);
            }})
           }

          function test12(){
              $.ajax({url:"rainy-4.php",success:function(result){
              $("#comment").text(result);
            }})
           }

          function test13(){
              $.ajax({url:"rainy-5.php",success:function(result){
              $("#comment").text(result);
            }})
           }

          function test14(){
              $.ajax({url:"rainy-6.php",success:function(result){
              $("#comment").text(result);
            }})
           }

          function test15(){
              $.ajax({url:"rainy-7.php",success:function(result){
              $("#comment").text(result);
            }})
           }

          </script>

           </div><!--Emojis-->
           <br>
           <br>
      <input type="text" style="display:none;" id="username" value="<?php 
      echo 
      $_SESSION['user']['username']; ?>">
          <button id="btn" name="btn" type="submit" onclick="post();" 
         style="top: 30px; cursor: pointer; color: #000; font-size: 24px; 
         height: 40px; border:none; font-weight: bold; box-shadow: inset 0 
        -15px 35px -5px rgba(0,0,0,0.3);">Αποστολή
          </button>

   </div>
   </div>

Answer 1

Drac WarThorn，

我认为您应该使用 val() 而不是 text() 来为 TextArea 推送新值

<script type="text/javascript">
          function test(){
              $.ajax({url:"cloudda3.php",success:function(result){
              $("#comment").val(result);
            }})
           }

          function test2(){
              $.ajax({url:"cloudnigh3.php",success:function(result){
              $("#comment").val(result);
            }})
           }

          function test3(){
              $.ajax({url:"cloudy.php",success:function(result){
              $("#comment").val(result);
            }})
           }

          function test4(){
              $.ajax({url:"cloudy-day-1.php",success:function(result){
              $("#comment").val(result);
            }})
           }

          function test5(){
              $.ajax({url:"cloudy-day-2.php",success:function(result){
              $("#comment").val(result);
            }})
           }

          function test6(){
              $.ajax({url:"cloudy-night-1.php",success:function(result){
              $("#comment").val(result);
            }})
           }

          function test7(){
              $.ajax({url:"cloudy-night-2.php",success:function(result){
              $("#comment").val(result);
            }})
           }

          function test8(){
              $.ajax({url:"night.php",success:function(result){
              $("#comment").val(result);
            }})
           }

          function test9(){
              $.ajax({url:"rainy-1.php",success:function(result){
              $("#comment").val(result);
            }})
           }

          function test10(){
              $.ajax({url:"rainy-2.php",success:function(result){
              $("#comment").val(result);
            }})
           }

          function test11(){
              $.ajax({url:"rainy-3.php",success:function(result){
              $("#comment").val(result);
            }})
           }

          function test12(){
              $.ajax({url:"rainy-4.php",success:function(result){
              $("#comment").val(result);
            }})
           }

          function test13(){
              $.ajax({url:"rainy-5.php",success:function(result){
              $("#comment").val(result);
            }})
           }

          function test14(){
              $.ajax({url:"rainy-6.php",success:function(result){
              $("#comment").val(result);
            }})
           }

          function test15(){
              $.ajax({url:"rainy-7.php",success:function(result){
              $("#comment").val(result);
            }})
           }

          </script>