Jquery .text()不能破解行

时间:2015-10-29 13:17:37

标签: javascript jquery

我的代码绝对正常但是唯一的问题是.text()无法打破来自数据库的行,并且所有结果都在一行中,并且在对话框中已经有一些空格在我的文本之前开始。我不想使用.html(),因为它具有与我的数据库相同的所有特殊字符。

$(document).ready(function() {
    var record;

    //set up the button styling and click functionality
    $('.editButton').button({
        icons: {
            primary: "ui-icon-document"
        }
    }).click(function() {
        //set which record we're editing so we can update it later
        record = $(this).parents('.record');
        //populate the editing form within the dialog

        $('#Title').val(record.find('.sh_title').text());
        $('#Post').val(record.find('.sh_post').text());
        $('#PostId').val(record.find('.postid').text());

        //show the dialog
        $("#dialogContent").dialog("open");
    });    

    //set up the dialog box.
    $("#dialogContent").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            OK: function() {
                record.find('.sh_title').text($('#Title').val());
                record.find('.sh_post').text($('#Post').val());
                $(this).dialog("close");
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });
});

1 个答案:

答案 0 :(得分:0)

DEMO

$(document).ready(function () {
    var record;

    //set up the button styling and click functionality
    $('.editButton').click(function () {
        //set which record we're editing so we can update it later
        record = $(this).parents('.record');
        //populate the editing form within the dialog

        $('#Title').val(cleanText(record.find('.sh_title').html()));
        $('#Post').val(cleanText(record.find('.sh_post').html()));
        $('#PostId').val(cleanText(record.find('.postid').html()));
      
           
     
        //show the dialog
       // $("#dialogContent").dialog("open");
        return false;
    });

    //set up the dialog box.
    $("#dialogContent").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            OK: function () {
                record.find('.sh_title').text($('#Title').val());
                record.find('.sh_post').text($('#Post').val());
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
});


function cleanText(text){debugger;
text = text.replace(/<\/p>/mg, "<br></p>");
text = text.replace(/<\/div>/mg, "<br></div>");
text = text.replace(/<br\s*\/?>/mg, "\n");
text = text.replace(/<p/mg, "<br><p");
text = text.replace(/<br\s*\/?>/mg, "\n");
text = text.replace(/  /mg, " ");
text = text.trim();
text = htmlDecode(text);                         
                         
var regex = /(<([^>]+)>)/ig;
                         
return text.replace(regex, "");
}

function htmlDecode(input){
  var e = document.createElement('div');
  e.innerHTML = input;
  return e.innerText;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr class='record'>
        <td class='sh_title'> Title</td>
        <td class='sh_post'> this is the content  <br/> new one</td>
        <td class='postid'> 1</td>
        <td><a class='editButton' href="">Edit</a> </td>

    </tr>
    <tr class='record'>
        <td class='sh_title'> Title 2</td>
        <td class='sh_post'> this is the content 2  <br/> new one <br /> Line 2</td>
        <td class='postid'> 2</td>
        <td><a class='editButton' href="">Edit</a> </td>
    </tr>
</table>

<table>
    <tr>><td>Post Title</td><td><textarea id='Title'></textarea></td></tr>
    <tr>><td>Desc</td><td><textarea id='Post'></textarea></td></tr>
    <tr>><td>Id</td><td><textarea id='PostId'></textarea></td></tr>
</table>

当您使用html输入标记时,它是单行输入,这就是为什么它不会在文本框中显示多行,

如果您想要显示多行,然后将输入标记更改为textarea,那么它将适合您。