如何删除空格并在jquery中添加enter?

时间:2017-08-06 07:15:15

标签: javascript jquery html

如何删除以下代码中的空格。或者你可以在https://jsfiddle.net/m2rn2nqg/9/

中看到
<br> ...... THIS RESULT ...... <br> 
 <div id="posttextareadisplay"></div>
 <div class="row-fluid">
    <div class="span16">
        <textarea class="isi" spellcheck="false" autocorrect="off" style="height:80px;width:300px;" name="mytxtarea" id="mytxtarea" class="ed">This is a sample text










فَإِذَا جَلَسْتَ فِي وَسَطِ الصَّلَاةِ فَاطْمَئِنَّ، وَافْتَرِشْ فَخِذَكَ الْيُسْرَى ثُمَّ تَشَهَّدْ
</textarea>
    </div>
</div>
<br> ___________________THIS CODE __________________<br> 
 <pre id="postcode"><pre>
<br>_____________________________________________________

<script>
$('.tools').on("click", function() {
        var gogel = $('.isi').val();
        $('#posttextareadisplay').html(arabicParagraph(gogel, arabic => `<p class="lbs0">${ arabic }</p>`));
        $('#postcode').text(arabicParagraph(gogel, arabic => `<p class="lbs0">${ arabic }</p>`));
     });
    $('.isi').on("input propertychange", function() {
        var gogel = $('.isi').val();
        $('#posttextareadisplay').html(arabicParagraph(gogel, arabic => `<p class="lbs0">${ arabic }</p>`));
        $('#postcode').text(arabicParagraph(gogel, arabic => `<p class="lbs0">${ arabic }</p>`));
    });

const additionalCustomizationText = pattern => customization => text => customization(text, pattern)
function arabicParagraph(text, cb) {
    text = text.trim()
    const arabicFontPattern = /[\u0600-\u06ff]|[\u0750-\u077f]|[\ufb50-\ufc3f]|[\ufe70-\ufefc]/g
    const getArabicText = additionalCustomizationText(arabicFontPattern)
    const addArabicParagraphAndBold = getArabicText((text, pattern) => {
        text = text.trim()
        if (pattern.test(text) && !/[\w!@#$%^&*-_.,<>?`~\|]/g.test(text)) {
            return cb(text)
        } else if (text === '') {
            return ''
        }
        return `<p>${text.replace(/(\s+[\u0600-\u06ED]+|[\u0750-\u077f]+|[\ufb50-\ufc3f]+|[\ufe70-\ufefc]+(?:\s+[\u0600-\u06ED]+|[\u0750-\u077f]+|[\ufb50-\ufc3f]+|[\ufe70-\ufefc]+)*)/g, '<o>$1</o>')}</p>`
    })
    const getTextEveryLine = text.trim().split('\n\n')
    return getTextEveryLine.reduce((res, val) => res + addArabicParagraphAndBold(val), '')
}

</script>

问题1 ====已解决====

尝试输入1个字母 这是一个示例文本 来生成结果和代码。为什么仍然有多余的空格<p> </p>,因为我已经使用$.trim()?因此,如果它只是一个空格,则无需创建段落

问题2

看一下问题的第二部分。如果只有1个输入,我想添加<br>。因为如果我使用当前代码,结果与第一个代码相同。只需添加空格,不要输入或<br>。所以如果没有输入给空间,如果任何一个输入给出输入和任何两个或更多,它将与段落分开

/* If no enter <---- this no problem */ 
This is a sample text فَإِذَا جَلَسْتَ فِي وَسَطِ الصَّلَاةِ فَاطْمَئِنَّ، وَافْتَرِشْ فَخِذَكَ الْيُسْرَى ثُمَّ تَشَهَّدْ
/* To be */
<p>This is a sample text<o> فَإِذَا</o><o> جَلَسْتَ</o><o> فِي</o><o> وَسَطِ</o><o> الصَّلَاةِ</o><o> فَاطْمَئِنَّ،</o><o> وَافْتَرِشْ</o><o> فَخِذَكَ</o><o> الْيُسْرَى</o><o> ثُمَّ</o><o> تَشَهَّدْ</o></p>



/* If JUST 1 enter <---- this PROBLEM */ 
This is a sample text 
فَإِذَا جَلَسْتَ فِي وَسَطِ الصَّلَاةِ فَاطْمَئِنَّ، وَافْتَرِشْ فَخِذَكَ الْيُسْرَى ثُمَّ تَشَهَّدْ
/* RESULT */
<p>This is a sample text<o> 
فَإِذَا</o><o> جَلَسْتَ</o><o> فِي</o><o> وَسَطِ</o><o> الصَّلَاةِ</o><o> فَاطْمَئِنَّ،</o><o> وَافْتَرِشْ</o><o> فَخِذَكَ</o><o> الْيُسْرَى</o><o> ثُمَّ</o><o> تَشَهَّدْ</o></p>
/* But i want to be */
<p>This is a sample text<br><o> 
فَإِذَا</o><o> جَلَسْتَ</o><o> فِي</o><o> وَسَطِ</o><o> الصَّلَاةِ</o><o> فَاطْمَئِنَّ،</o><o> وَافْتَرِشْ</o><o> فَخِذَكَ</o><o> الْيُسْرَى</o><o> ثُمَّ</o><o> تَشَهَّدْ</o></p>



/* If JUST 2 enter or more <---- this no problem */ 
This is a sample text

فَإِذَا جَلَسْتَ فِي وَسَطِ الصَّلَاةِ فَاطْمَئِنَّ، وَافْتَرِشْ فَخِذَكَ الْيُسْرَى ثُمَّ تَشَهَّدْ
/* To be */
<p>This is a sample text</p><p class="lbs0">فَإِذَا جَلَسْتَ فِي وَسَطِ الصَّلَاةِ فَاطْمَئِنَّ، وَافْتَرِشْ فَخِذَكَ الْيُسْرَى ثُمَّ تَشَهَّدْ</p>

更新: Mohammad Ahmad

您的代码就像这样

<p>This is a samaple text<br /><br />          <br /><br />         <br /><br /><br /><br />          <br /><br /><br />فَإِذَا جَلَسْتَ فِي وَسَطِ الصَّلَاةِ فَاطْمَئِنَّ، وَافْتَرِشْ فَخِذَكَ الْيُسْرَى ثُمَّ تَشَهَّدْ<br /></p>

不是这样,我只需要一个<br>,如果有任何一个输入\n

<p>This is a sample text<br><o> 
فَإِذَا</o><o> جَلَسْتَ</o><o> فِي</o><o> وَسَطِ</o><o> الصَّلَاةِ</o><o> فَاطْمَئِنَّ،</o><o> وَافْتَرِشْ</o><o> فَخِذَكَ</o><o> الْيُسْرَى</o><o> ثُمَّ</o><o> تَشَهَّدْ</o></p>

1 个答案:

答案 0 :(得分:0)

you can use ReGex to replace spaces and tabs. after assigning gogel variable:

 var gogel = $('.isi').val();

Add this line:

 gogel = gogel.replace(/[\t\s]{2,}/i, ' ');

Question 2:

$('.isi').on("input propertychange", function() {
    var gogel = $('.isi').val();
    gogel = gogel.replace(/\n/g, "<br />");
    $('#posttextareadisplay').html(
    arabicParagraph(gogel, arabic => `<p class="lbs0">${ arabic }</p>`));
    $('#postcode').text(
    arabicParagraph(gogel, arabic => `<p class="lbs0">${ arabic }</p>`));
});