I have a textarea defined as:
<textarea class="lined" rows="30" name="script_text" ng-model="textContent" placeholder="Enter Script Here" style="width:100%"></textarea>
Is it possible to have each line in the text area only start with a certain list of words?
For example, the user can only enter:
THIS (doesnt matter what comes after)
IS (doesnt matter what comes after)
ALLOWED (doesnt matter what comes after)
But if the user types in:
This is a sentence
next line
and another line
That is not allowed. Is this possible?
Okay. Here a pure Javascript solution. In Angular you can write it with $scope.yourmodel.val() etc.
I tested it with this HTML:
<textarea id="text" class="lined" rows="30" name="script_text" ng-model="textContent" placeholder="Enter Script Here" style="width:100%"></textarea>
I inserted this value:
document.getElementById('text').value
Result:
"Bla das ist ein Text
Nochmal blaa"
First: I got a regex to get each line. You have to go bottom to top. Zero is the last line and one, in my example, the first line:
document.getElementById('text').value.match('(.*)(?=(\n.*){1}$)')
The result:
["Bla das ist ein Text", "Bla das ist ein Text", "
Nochmal blaa"]
Good: Now you can write a for, foreach, whatever loop you want.
You count up and use the cnt in your regex. If you got a null, you're finished.
I got for:
document.getElementById('text').value.match('(.*)(?=(\n.*){2}$)')
a null
Second: You split the each line text by words. The first value is your word:
document.getElementById('text').value.match('(.*)(?=(\n.*){1}$)')[0].split(' ')[0]
Result: "Bla"
If you're using Angular. You could do a great use of the ng-pattern directive.
You could try this:
<textarea class="lined" rows="30" name="script_text" ng-model="textContent" placeholder="Enter Script Here" style="width:100%" ng pattern="/^(THIS|IS|ALLOWED) .*/"></textarea >
Here's a fiddle
Related
I have a object in view.component.ts file coming form backend. It is supposed to be description for a product. It has more than 500 lines of text. for eg:
{"description" : "Hello my Name is Param Bedi.\r\nHow are you\r\n\r...continue till 500 lines and more"}
I need to display this to Angular view. But its just coming straight as it is ie containing all the "\r\n" etc. Its not inserting a new line instead of \n.
This is what I am doing in view.component.html
<div>
<p>{{ data["description"] }}</p>
</div>
What should I do so that I can display the data with newline and other special characters working?
You can use HTMLElement.innerText:
<div>
<p [innerText]="data.description"></p>
</div>
Or, if you need special character output, using Element.innerHTML (with replacing new lines with <br>):
<div>
<p [innerHTML]="data.description.replace(/(\r\n|\r|\n)/g, '<br>')"></p>
</div>
Solution 1: You can use white-space: pre-line in css. You can check here CSS White Space.
Solution 2: You can use Textarea with readonly.
<textarea name="description" readonly [(ngModel)]="data.descrption" style="resize: none;" ></textarea>
I learned that indexOf() could not be used for searching the regular expression in the string, however search() has not the start position and the end position as the optional parameters. How can I find and replace all certain regular expression in the same string? I added the problem where it is no so simple as replace() will be enough.
Problem example
Replace all consecutive two <br/><br/> with </p><p>, if after second <br/> some letters or digits (\w) are following.
Leave all single <br/> of three or more consecutive <br/> such as.
If there are no letter or digits after consecutive two <br/><br/>, leave it such as.
If we use replace() for solving this problem, not only <br/><br/>, but also following symbols will be replaced. To evade it, we need:
Find the start of matching with regular expression. It will be /(?:<br\s*[\/]?>){2}\s*\w+/.
From the start of matching position, find the start position of \w part.
Replace the /(?:<br\s*[\/]?>){2}\s*/ part with </p><p>.
Repeat 1-3 inside the loop from the end of the previous matching position util next matches exists.
As I told above, I don't know how to search the new matching from the certain position. Is there some ways except slice the string and join it again?
var testString = $('#container').html();
console.log(testString.search(/(?:<br\s*[\/]?>){2}\s*\w+/));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<p>
<!-- Only one br: leave such as -->
Brick quiz whangs jumpy veldt fox! <br/>
<!-- Two br and letters then: replace by </p><p> -->
Sphinx of black quartz judge my vow! <br/><br />
<!-- No symbols after 2nd br: leave such as -->
Pack my box with five dozen liquor jugs. <br/><br /><br/>
<!-- Two br and symbols then: replace by </p><p> -->
The vixen jumped quickly on her foe barking with zeal. <br/><br />
<!-- No letters after <br/><br/>: leave such as -->
Brawny gods just flocked up to quiz and vex him.<br/><br />
<p>
</div>
As commented by #epascarello and #torazaburo its NOT recommended to use RegExp for parsing HTML and you should better use HTML parsers to be on safer side.
But if your HTML string that you want to parse is going to use a fixed template / format, you can still use RegExp for parsing it.
Assuming the current RegExp that you have posted returns expected search results for you, you can try following code to replace the string and use </p><p> as required.
var testString = $('#container').html();
console.log(testString.replace(/(?:<br\s*[\/]?>){2}(\s*\w+)/gi, '</p><p>$1'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<p>
Brick quiz whangs jumpy veldt fox! <br/>
Sphinx of black quartz judge my vow! <br/><br />
Pack my box with five dozen liquor jugs. <br/><br /><br/>
The vixen jumped quickly on her foe barking with zeal. <br/><br />
Brawny gods just flocked up to quiz and vex him.<br/><br />
</p>
</div>
Note:
I've kept your RegExp as is assuming it finds the <br> tags as per your requirement, and just added the () around \s*\w+ because we want to remember (keep) that string in the output
I've used gi flags in the RegExp. You can find details here
$1 in replace string will use the remembered string which was matched by \s*\w+
I am trying to assign to <p> element a large amount of text, which includes some <br /> tags inside, as it's html. I am using the .html() method from JQuery, but it wont show the line breaks.
My code:
var text = "Hello, this is a pretty <br/> large text with some <br/> line breaks inside"
$('.container').append("<p class='myPClass'><p>");
$('.myPClass').html(text);
it does add the text as 'myPClass' html, but it totally ignores the <br/> tags.
the result i am getting is:
<p class='myPClass'>Hello, this is a pretty large text with some line breaks inside</p>
so it would look like:
"Hello, this is a pretty large text with some line breaks inside"
what i want my result to be:
<p class='myPClass'>Hello, this is a pretty <br/> large text with some <br/> line breaks inside</p>
so it would look like:
"Hello, this is a pretty
large text with some
line breaks inside"
what is wrong with my code? or how can i get to do this?
You can also try the following:
var text = "Hello, this is a pretty" + "<br/>" + "large text with some" + "<br/>" + "line breaks inside"
$('.container').append("<p class='myPClass'><p>");
$('.myPClass').html(text);
Try this
var text = "Hello, this is a pretty <br/> large text with some <br/> line breaks inside"
$('.container').append("<p class='myPClass'></p>");
$('.myPClass').html(text);
I apologize it the title is unclear, but I couldn't think of any other way to really say it; below is a sample of the code I have tried:
<input type="text" id="hor_delim" value="\t" size="2" />
var split = String(document.getElementById('hor_delim').value);
var field = List[i].split(split);
Where List is an array with each item being a single line from a text area. The goal of this code is to split the line by the tab character, but for some reason for which I cannot fathom or figure out(through research), it does not evaluate the \t as a tab character, but a literal \t. I've tried using eval() with no success, so any help here would be appreciated.
I managed to solve this after I started thinking about the below(accepted) solution, here is what I came up with. It's a slight bit of a hack in terms of specificity, but it works;
var split = split.replace("\\t","\t");
Use the HTML entity instead of \t:
<input type="text" id="hor_delim" value=" " size="2" />
http://jsfiddle.net/A8Mnj/
Consider the following HTML page fragment:
<div id='myDiv'>
Line 1.<br />
Line 2<br />
These are <special> characters & must be escaped !##><>
</div>
<input type='button' value='click' id='myButton' />
<textarea id='myTextArea'></textarea>
<script>
$(document).ready(function () {
$('#myButton').click(function () {
var text = $('#myDiv').text();
$('#myTextArea').val(text);
});
});
</script>
First, there is a div element with id myDiv. It contains some text similar to what might be retrieved form a SQL database at runtime in my production web site.
Next, there is a button and a textarea. I want the text in myDiv to appear in the textarea when the button is clicked.
However, using the code I provided, the line-breaks are stripped out. What can I do about this, taking into consideration that escaping special characters is absolutely non-negotiable?
Your code works great for me in both Firefox and Chrome: http://jsfiddle.net/jYjRc/
However, if you have a client that doesn't do what you want, replace <br>s with newline characters.
Edit: Tested in IE7 and the code breaks. So I updated the fiddle with my suggestion: http://jsfiddle.net/jYjRc/1/
Do your HTML like so:
<div id='myDiv'><pre>
Line 1.
Line 2
These are <special> characters & must be escaped !##><>
</pre></div>
And now .text() will return the text exactly as you specify it in the <pre> tag, even in IE.